<template>
  <div
    class="room-search"
    style="width:100%;"
  >
    <a-select
      show-search
      :value="value"
      placeholder="search room"
      style="width:100%;"
      :default-active-first-option="false"
      :show-arrow="false"
      :filter-option="false"
      :not-found-content="null"
      @search="handleSearch"
      @change="handleChange"
      v-bind="$attrs"
    >
      <a-select-option
        v-for="d in data"
        :key="d.value"
      >
        {{ d.text }}
        <loading-outlined v-if="!d.isLive" />
      </a-select-option>
    </a-select>
  </div>
  <a-tag
    color="#292a2b"
    v-for="tag in tags"
    :key="tag"
    :closable="true"
    @close="() => handleClose(tag)"
    style="margin-top:10px;"
  >
    <a-button
      type="link"
      v-on:click="$emit('click-tag', tag.value)"
    >{{ tag.text }}</a-button>
  </a-tag>
</template>
<script>
import { onMounted, ref } from "vue";
import { invoke } from "@tauri-apps/api/tauri";
import { LoadingOutlined } from "@ant-design/icons-vue";

let timeout;

function fetch(value, callback) {
  if (value === "" || value == undefined) {
    return;
  }
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }

  function fake() {
    invoke("get_search_rec", { kw: value + "" }).then((res) => {
      if (res == null || res === "") {
        return;
      }
      const result = JSON.parse(res).data.roomResult;
      const data = [];
      if (!result) {
        return;
      }
      result.forEach((r) => {
        data.push({
          value: r.rid,
          text: r.nickName,
          isLive: r.isLive == 1,
        });
      });
      callback(data);
    });
  }

  timeout = setTimeout(fake, 300);
}

function addTag(tags, value) {
  let tagList = tags;
  if (value && tagList.indexOf(value) === -1) {
    tagList = [...tagList, value];
  }
  console.log(tagList);
  invoke("put", {
    key: "tags",
    value: JSON.stringify(tagList),
  });
  return tagList;
}

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Search",
  components: {
    LoadingOutlined,
  },
  setup() {
    const data = ref([]);
    const tags = ref([]);
    const value = ref(null);

    const handleSearch = (v) => {
      fetch(v, (d) => {
        data.value = d;
      });
    };
    const handleChange = (v) => {
      value.value = v;
      fetch(v, (d) => {
        data.value = d;
        tags.value = addTag(tags.value, d[0]);
      });
    };
    const handleClose = (removedTag) => {
      const t = tags.value.filter((tag) => tag !== removedTag);
      tags.value = t;
      invoke("put", { key: "tags", value: JSON.stringify(t) });
    };

    onMounted(() => {
      invoke("get", { key: "tags" }).then((res) => {
        if (res == null || res === "") {
          return;
        }
        tags.value = JSON.parse(res);
      });
    });

    return {
      data,
      tags,
      value,
      handleSearch,
      handleClose,
      handleChange,
    };
  },
};
</script>
